<template>
  <el-table
    :data="tableData"
    stripe
    class="tb-edit"
    style="width: 100%;"
    :height="height"
    :highlight-current-row="!disabled"
    @row-click="handleCurrentChange"
    border>
    <el-table-column
    v-for="(item, index) in tableHeader"
    :key="index"
    :prop="item.name"
    :headerAlign="'center'"
    :align="item.align"
    :label="item.title"
    :fixed="item.fixed"
    show-overflow-tooltip
    :width="item.width">
      <template slot-scope="scope">
        <el-select v-if="item.type === 'select'"  size="small" v-model="scope.row[item.name]"
                   @change="handleEdit(scope.$index, scope.row)"
                   placeholder="请选择内容"
                   value="">
          <el-option
            v-for="option in item.data"
            :disabled="disabled"
            :value="option.name"
            :key="option.name"
            :label="option.name"/>
        </el-select>
        <el-button v-else-if="item.type === 'btn'" :disabled="disabled"  @click="onSelected(scope.$index,scope.row)" type="primary" size="small">
          {{item.text}}
        </el-button>
        <el-input v-else size="small" :disabled="item.disabled || disabled" v-model="scope.row[item.name]" placeholder="请输入内容"
                  @change="handleEdit(scope.$index, scope.row)"/>
        <span>{{scope.row[item.name]}}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'index',
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    height: {
      type: Number,
      default: 800
    },
    tableHeader: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleCurrentChange(row, event, column) {
      console.log(row, event, column, event.currentTarget)
    },
    handleEdit(index, row) {
      console.log(index, row)
      this.$emit('handleEdit', { index: index, row: row })
    },
    onSelected(index, row) {
      console.log(row)
      this.$emit('onTableBtn', { index: index, row: row })
    }
  }
}
</script>

<style scoped>
  .tb-edit .el-input, .tb-edit .el-select {
    display: none
  }
  .tb-edit .current-row .el-input, .tb-edit .current-row .el-select {
    display: block
  }
  .tb-edit .current-row .el-input + span, .tb-edit .current-row .el-select + span {
    display: none
  }
</style>
